/*
 * Copyright 2024 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

import {Button, Heading} from 'react-aria-components';
import {
  Disclosure,
  DisclosureGroup,
  DisclosurePanel
} from '../src/Disclosure';
import {Meta, StoryFn} from '@storybook/react';
import React from 'react';
import './styles.css';

export default {
  title: 'React Aria Components/DisclosureGroup',
  component: DisclosureGroup
} as Meta<typeof DisclosureGroup>;

export type DisclosureGroupStory = StoryFn<typeof DisclosureGroup>;

export const DisclosureGroupExample: DisclosureGroupStory = (args) => {
  const [isDisabled, setIsDisabled] = React.useState(false);
  const toggleDisabled = () => setIsDisabled((d) => !d);

  return (
    <>
      <Button onPress={toggleDisabled}>Toggle Disabled</Button>
      <DisclosureGroup {...args}>
        <Disclosure isDisabled={isDisabled}>
          {({isExpanded}) => (
            <>
              <Heading level={3}>
                <Button slot="trigger">
                  {isExpanded ? '⬇️' : '➡️'} This is a disclosure header
                </Button>
              </Heading>
              <DisclosurePanel>
                <p>This is the content of the disclosure panel.</p>
              </DisclosurePanel>
            </>
          )}
        </Disclosure>
        <Disclosure isDisabled={isDisabled}>
          {({isExpanded}) => (
            <>
              <Heading level={3}>
                <Button slot="trigger">
                  {isExpanded ? '⬇️' : '➡️'} This is a disclosure header
                </Button>
              </Heading>
              <DisclosurePanel>
                <p>This is the content of the disclosure panel.</p>
              </DisclosurePanel>
            </>
          )}
        </Disclosure>
      </DisclosureGroup>
    </>
  );
};
